<!-- subpkg_medicine/payment/payment.vue -->
<script lang="ts" setup>
	import { orderPayApi } from '../../apis/consult'
	import { addressListApi, preOrderApi, createOrderApi } from '@/apis/order'
	import { Address, OrderPre } from '@/types/order.d.ts'
	import { ref } from 'vue'
	//收货人地址信息
	const addressInfo = ref({} as Address)
	//调接口,拿数据
	const getAddressList = async () => {
		const res = await addressListApi()
		addressInfo.value = res[0]
	}
	getAddressList()

	//药品信息
	//获取药品id
	const props = defineProps<{ id: string }>()
	//预付订单信息
	const preOrderInfo = ref({} as OrderPre)
	//药品预付订单
	const getPreOrder = async () => {
		const res = await preOrderApi(props.id)
		preOrderInfo.value = res
		// console.log(res)
	}
	getPreOrder()

	//待支付订单
	const paymentRef = ref()
	//待支付订单的id
	const OrderId = ref('')
	//打开支付页面
	//需要先创建待支付订单  然后再打开支付页面
	const showpayment = async () => {
		if (OrderId.value === '') {
			const res = await createOrderApi(props.id, addressInfo.value.id)
			//接收订单Id
			OrderId.value = res.id
		}
		paymentRef.value.open()
	}
	//点击X逻辑
	const PaymentClose = () => {
		paymentRef.value.close()
	}
	//支付确认逻辑
	//选择支付渠道
	const confrimOrder = async (paymentType: number) => {
		// console.log(paymentType)
		if (paymentType !== 0) {
			return uni.showToast({
				title: '目前只支持支付宝支付呦~',
				icon: 'error',
			})
		}

		//实现支付宝支付
		const res = await orderPayApi({
			orderId: OrderId.value,
			paymentMethod: '1',
			payCallback: 'http://localhost:5173/#/subpkg_medicine/pay_result/pay_result',
		})
		//页面跳转
		window.location.href = res.payUrl
	}
</script>

<template>
	<scroll-page background-color="#f6f6f6">
		<view class="medicine-page">
			<view class="page-header">
				<view class="order-shippment">
					<view class="region">
						<uni-icons size="16" color="#FF7702" type="location-filled" />
						{{ addressInfo.city }}{{ addressInfo.county }}
					</view>
					<view class="detail">{{ addressInfo.addressDetail }}</view>
					<view class="receiver"
						>{{ addressInfo.receiver }} {{ addressInfo.mobile }}</view
					>
				</view>
			</view>

			<view class="order-shop">
				优医药房
				<text class="alt">优医质保 假一赔十</text>
			</view>
			<!-- 药品列表 -->
			<view class="medicine-list">
				<view
					v-for="item in preOrderInfo.medicines"
					:key="item.id"
					class="medicine-list-item"
				>
					<image class="medicine-cover" :src="item.avatar" mode="aspectFill" />
					<view class="medicine-info">
						<text class="name">{{ item.name }}</text>
						<text class="unit symbol">{{ item.specs }}</text>
						<text class="price">¥{{ item.amount }}</text>
					</view>
					<view class="quantity">{{ item.quantity }}</view>
					<view class="guide">用法用量：{{ item.usageDosag }}</view>
				</view>
				<!-- <view class="medicine-list-item">
					<image
						class="medicine-cover"
						src="/static/uploads/medicine-2.jpg"
						mode="aspectFill"
					/>
					<view class="medicine-info">
						<text class="name">瑞巴派特片</text>
						<text class="unit symbol">24片</text>
						<text class="price">¥25.00</text>
					</view>
					<view class="quantity">x1</view>
					<view class="guide">用法用量：口服，每次1袋，每天3次，用药3天</view>
				</view> -->
			</view>

			<!-- 订单信息 -->
			<view class="order-info">
				<uni-list :border="false">
					<uni-list-item title="药品金额" :right-text="`¥${preOrderInfo.payment}`" />
					<uni-list-item title="运费" :right-text="`¥${preOrderInfo.expressFee}`" />
					<uni-list-item
						title="优惠券"
						show-arrow
						:right-text="`-¥${preOrderInfo.couponDeduction}`"
					/>
					<uni-list-item title="实付款" :right-text="`¥${preOrderInfo.actualPayment}`" />
				</uni-list>
			</view>

			<!-- 底部 -->
			<view class="toolbar">
				<view class="total-amount">
					需付款: <text class="number">¥{{ preOrderInfo.actualPayment }}</text>
				</view>
				<view class="buttons">
					<button @tap="showpayment" class="uni-button">立即支付</button>
				</view>
			</view>
		</view>
	</scroll-page>
	<!-- 支付组件 -->
	<custom-payment
		ref="paymentRef"
		@close="PaymentClose"
		:amount="preOrderInfo.actualPayment"
		@confirm="confrimOrder"
	></custom-payment>
</template>

<style lang="scss">
	@import './index.scss';
</style>
